<template>
    <Page class="KeypadSelect" :options="mPageOptions">
        <div class="Items flex-1 scroll-y">
            <div class="Item flex-h middle" v-for="(item,index) in mItems" :key="index"
                v-focusable
                @click="item.checked=!item.checked">
                <div class="Label flex-1">{{item.label}}</div>
                <div class="Check flex-v" :class="[item.checked&&'Checked']">
                </div>
            </div>
        </div>
    </Page>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import AppPage from "app/common/AppPage";
import { PageOptions } from "app/components/navigation/Page.vue";

@Component
export default class KeypadSelect extends AppPage {


    mPageOptions = this.createPageOptions();
    createPageOptions(): PageOptions {
        let context = this;
        return {
            toolBar: {
                title: "键盘布局（多选）",
            },
            navigationBar: {
                show: true,
                options: {
                    left: "菜单",
                    center: "选择",
                    on: {
                        keyPress: {
                            SoftLeft: () => {
                                this.handleMenu();
                            },
                            SoftRight: () => {
                            },
                        },
                    }
                },
            }
        }
    }

    mKeypadHelper: any;

    mItems = [
        { label: "中文(拼音)", value: "chinese_cn", mode: "T9", checked: false, },
        { label: "English(US)", value: "english_us", mode: "abc", checked: false, },
        { label: "Español(US)", value: "spanish_us", mode: "abc", checked: false, },
    ]

    onStart() {
        if (__KAIOS__ < 3) {
            this.themeDark();
        }
    }

    mounted() {
        if (window?.["libSession"]?.initService) {
            this.$prompt.showLoading();
            window["libSession"].initService(["settingsService", "devicecapabilityService"]).then(() => {
                window["SettingsObserver"]?.init();
                if (window["KeypadHelper"]) {
                    this.mKeypadHelper = new window["KeypadHelper"]();
                    this.handleLayouts();
                }
            }).finally(() => {
                this.$prompt.closeLoading();
            });
        }
    }

    handleLayouts() {
        this.mKeypadHelper
            .getSettings()
            .then(res => {
                this.mItems.forEach(item => {
                    item.checked = !!res?.layouts?.[item.value];
                })
            })
            .catch((t) => {

            })
    }

    handleSelect() {
        if (!this.mItems.some(o => o.checked)) {
            this.$prompt.showToast("至少选择一项");
            return;
        }
        let layouts = this.mItems.reduce((map, item, index) => {
            map[item.value] = item.checked;
            return map;
        }, {} as any);
        this.mKeypadHelper?.setLayouts(layouts);
        this.$prompt.showToast("已保存设置");
    }



    handleMenu() {
        this.$prompt.showDialog_List({
            title: "菜单",
            data: [
                {
                    label: "保存设置", click: () => {
                        this.handleSelect();
                    }
                },
                {
                    label: "系统语言", click: () => {
                        this.handleLanguage();
                    }
                },
                {
                    label: "关于", click: () => {
                        this.startPage("About");
                    }
                },
                {
                    label: "退出", click: () => {
                        window.close();
                    }
                },
            ]
        }, (item, index) => {
            item.click();
        })
    }

    handleLanguage() {
        this.$prompt.showDialog_List({
            title: "系统语言",
            data: [
                {
                    label: "设为简体中文", click: () => {
                        window["SettingsObserver"]?.setValue([{ name: "language.current", value: "zh-CN" }]);
                        this.$prompt.showToast("已设置");
                    }
                },
            ]
        }, (item, index) => {
            item.click();
        })
    }

}
</script>

<style lang="scss" scoped>
.KeypadSelect {
    position: relative;
    background: rgba($color: #eeeeee, $alpha: 1);
    .Items {
        padding: 24px 16px 0 16px;
        // padding: 10px 16px;
        position: relative;
        &::after {
            content: "";
            height: 24px;
            display: block;
        }
        .Item {
            position: relative;
            background: white;
            margin-bottom: 16px;
            font-size: 14px;
            box-shadow: 0 2px 6px 0 rgba($color: $colorPrimary, $alpha: 0.1);
            border-radius: 6px;
            padding: 10px 16px;
            $color: rgba(
                $color: #000000,
                $alpha: 1
            );
            color: $color;
            .Label {
            }
            .Check {
                width: 16px;
                height: 16px;
                border-radius: 3px;
                border: 2px solid $colorAccent;
                position: relative;
                padding: 2px;
                &.Checked {
                    &::after {
                        content: "";
                        width: 100%;
                        height: 100%;
                        background: $colorAccent;
                    }
                }
            }
            &.focus {
                background: rgba($color: $colorPrimary, $alpha: 1);
                box-shadow: 0 2px 6px 0 rgba($color: $colorPrimary, $alpha: 0.5);
                $color: white;
                color: $color;
                .Check {
                    border-color: $color;
                    &.Checked {
                        &::after {
                            background: $color;
                        }
                    }
                }
            }
        }
    }
}
</style>